<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .layui-table-cell {
            height: auto;
        }
    </style>
</head>
<body>
<blockquote class="layui-elem-quote">用户列表</blockquote>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="username">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="name">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="phone">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="">不限</option>
                    <option value="0">正常</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-bg-blue" lay-submit lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
    </div>
</form>

<table id="user-list" lay-filter="user-list"></table>

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
    </a>
</script>

<script type="text/html" id="bar">
    <!--    判断-->
    {{# if(d.status == 0){ }}
    <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="disable">禁用</a>
    <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-sm layui-bg-orange" lay-event="resetPassword">重置密码</a>
    {{# } else{ }}
    <!--禁用-->
    <a class="layui-btn layui-btn-sm layui-bg-blue" lay-event="enable">启用</a>
    {{# } }}
</script>

<script src="/layui/layui.js"></script>

<script>
    layui.use(['form', 'table'], () => {
        const form = layui.form;
        const table = layui.table;
        const $ = layui.$;

        //渲染表格
        table.render({
            elem: '#user-list',
            url: '/user/search',
            page: true,
            toolbar: '#toolbar',
            cols: [[
                {type: 'checkbox'},
                {title: 'ID', field: 'id'},
                {title: '用户名', field: 'username'},
                {
                    title: '头像', templet(d) {
                        return d.avatar ? '<img src="/upload/' + d.avatar + '">' : '';
                    }
                },
                {title: '姓名', field: 'name'},
                {title: '性别', field: 'sex'},
                {title: '电话', field: 'phone'},
                {title: '邮箱', field: 'email'},
                {title: '出生日期', field: 'birthday'},
                {title: '创建时间', field: 'createTime'},
                {
                    title: '状态', templet(d) {
                        return ['正常', '禁用'][d.status];
                    }
                },
                {title: '卡号', field: 'idcard'},
                {title: '余额', field: 'money'},
                {title: '操作', width: 220, toolbar: '#bar'},
            ]],
            parseData(result) {
                return {
                    code: result.code,
                    msg: result.msg,
                    count: result.data ? result.data.total : 0,
                    data: result.data ? result.data.list : null,
                };
            }
        });

        //搜索表单
        form.on('submit(search)', (data) => {
            //刷新表格
            table.reloadData('user-list', {
                where: data.field,
                page: {curr: 1},//页码回到第
            });
            //阻止表单提交
            return false;
        });

        //表格工具条
        table.on('toolbar(user-list)', (obj) => {
            if (obj.event == 'add') {
                add();
            }
        });

        //行工具事件
        table.on('tool(user-list)', (row) => {
            if (row.event == 'disable') {
                //禁用
                disable(row.data);
            } else if (row.event == 'enable') {
                //启用
                enable(row.data);
            } else if (row.event == 'edit') {
                //编辑
                edit(row.data);
            } else if (row.event == 'resetPassword') {
                resetPassword(row.data);
                //重置密码
            }
        });

        //禁用
        function disable(user) {
            layer.confirm('确定要禁用当前管理员吗？', function (index) {
                layer.close(index);
                editAdmin({id: user.id, status: 1});
            })

        }

        //启用
        function enable(user) {
            layer.confirm('确定要启用当前管理员吗？', function (index) {
                layer.close(index);
                editAdmin({id: user.id, status: 0});
            })
        }

        //重置密码
        function resetPassword(user) {
            layer.confirm('确定要重置当前管理员的密码吗？', function (index) {
                layer.close(index);
                editAdmin({id: user.id, password: 123});
            })
        }

        function editAdmin(user) {
            $.ajax({
                url: '/user/edit',
                data: user,
                type: 'post',
                dataType: 'json',
                success(result) {
                    if (result.code == 0) {
                        layer.msg('操作成功！', {icon: 6});
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                    //刷新表格
                    table.reloadData('user-list');
                },
                error() {
                    layer.msg('请求失败', {icon: 5});
                }
            });
        }

        //编辑
        function edit(user) {
            //弹出一个窗口
            layer.open({
                title: '编辑管理员信息',
                type: 2,
                area: ['450px', '300px'],
                content: '/html/user/edit.html',
                success(layero, index, that) {
                    // 获取 iframe 的窗口对象
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    //使用jQuery，找弹出页面中的元素
                    iframeWin.$('input[name="name"]').val(user.name);
                    iframeWin.$('input[name="phone"]').val(user.phone);
                    iframeWin.$('input[name="id"]').val(user.id);
                    iframeWin.$('img[mame="avatar"]').val(user.avatar);
                    iframeWin.$('#ID-upload-demo-img').attr('src' , '/upload/'+user.avatar);
                },
                end() {
                    //刷新表格
                    table.reloadData('user-list');
                }
            });
        }

        //添加
        function add() {
            layer.open({
                title: '创建用户账号',
                type: 2,
                area: ['450px', '400px'],
                content: '/html/user/add.html',
                end() {
                    //刷新表格
                    table.reloadData('user-list');
                }
            });
        }

    });
</script>
</body>
</html>